<template>
  <div class="search">
    <div class="searchbox">
      <input
        ref="input"
        type="text"
        placeholder="大家都在搜 孤勇者"
        v-model="value"
        @keyup.enter="search"
      />
    </div>

    <div class="content" v-if="show">
      <p class="hot">热搜：</p>
      <ul>
        <li v-for="(v, i) in searchHotDetailList" :key="i">
          <p @click="sug(v.searchWord)">{{ i + 1 + ". " + v.searchWord }}</p>
        </li>
      </ul>
    </div>
    <div v-else>
      <p class="tit">
        <van-icon name="play-circle-o" color="red" size="22" />
        <span>播放全部</span>
      </p>
      <div
        v-for="item in searchList"
        :key="item.id"
        class="songs"
        @click="gosongDetail(item.id)"
      >
        <div class="detail">
          <p class="name">{{ item.name }}</p>
          <p class="singer">
            <span v-for="item2 in item.artists" :key="item2.id"
              >{{ item2.name }} </span
            >-
            <span>{{ item.album.name }}</span>
          </p>
        </div>
        <div class="play">
          <van-icon name="play-circle-o" color="gray" size="20" />
          <van-icon name="more-o" color="gray" size="20" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchHotDetailAPI, getSearchAPI } from "../../api/home";
export default {
  name: "search",
  data() {
    return {
      searchHotDetailList: [],
      value: "",
      searchList: [],
      show: true,
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  methods: {
    async getSearchHotDetail() {
      const result = await getSearchHotDetailAPI();
      this.searchHotDetailList = result.data;
    },
    async search() {
      this.show = false;
      const result = await getSearchAPI(this.value);
      this.searchList = result.result.songs;
    },
    sug(name) {
      this.value = name;
      this.$refs.input.focus();
      this.search();
    },
    //点击播放歌曲
    gosongDetail(id) {
      this.$router.push(`/songdetail/${id}`);
    },
  },
  created() {
    this.getSearchHotDetail();
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
};
</script>

<style scoped>
.searchbox {
  background-color: #fff;
  height: 45px;
  margin: 8px 15px;
  border-radius: 23px;
  line-height: 45px;
  color: #666;
  padding: 0 15px;
}
.searchbox input {
  border: none;
  height: 40px;
  width: 100%;
}
ul {
  padding: 15px 25px;
}
ul li {
  margin-bottom: 8px;
}
.hot {
  padding: 5px 20px;
  font-size: 18px;
}
.content {
  margin-top: 10px;
}
.content p {
  padding: 0 10px;
  box-sizing: border-box;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: rgb(82, 82, 82);
}
.content p:hover {
  background: pink;
}
.tit {
  height: 30px;
  display: flex;
  padding: 0 10px;
}
.tit span {
  margin-left: 5px;
  font-size: 14px;
}
.songs {
  display: flex;
  padding: 15px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgb(221, 221, 221);
}
.detail {
  width: 80%;
}
.detail .name {
  font-size: 15px;
  font-weight: 550;
  margin-bottom: 5px;
  color: rgb(48, 47, 47);
}
.detail .singer {
  font-size: 13px;
  color: rgb(83, 83, 83);
}
.detail .singer span:first-child {
  color: rgb(89, 89, 201);
}
.play {
  width: 20%;
  text-align: center;
}
.play .van-icon:last-child {
  margin-left: 5px;
}
</style>
